<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .BMap_cpyCtrl {
        display: none;
    }
    .anchorBL {
        display: none;
    }
	</style>
    <!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4HzsadCh4FDh1Eukq2shC3WT"></script>
	<title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var theCity = "天津";
    var map;
    var scopeCircle;
    initMap();
    // map = new BMap.Map("allmap");
    // map.centerAndZoom(new BMap.Point(117.183189,39.094076), 11);

    // 随机向地图添加25个标注
	var bounds = map.getBounds();
	var sw = bounds.getSouthWest();
	var ne = bounds.getNorthEast();
	var lngSpan = Math.abs(sw.lng - ne.lng);
    var latSpan = Math.abs(ne.lat - sw.lat);
    console.log(latSpan,latSpan)
	for (var i = 0; i < 30; i ++) {
        addMarker(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
    }
    addMarker('117.188049','39.07869')
    // Map.clearOverlays()

    //增加标注
    function addMarker(paraLat, paraLog){   
        // console.log(paraLat,paraLog)     
        var pt = new BMap.Point(paraLat, paraLog);// 创建点
        var myIcon = new BMap.Icon("https://www.easyicon.net/api/resizeApi.php?id=1284995&size=32", new BMap.Size(32,35));
        // var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
        var marker2 = new BMap.Marker(pt,{icon:myIcon});  
        var label;
        // var datas = JSON.parse(localStorage.getItem('data'))
        //     if(datas.cmd == 'sendGarbagebinOpenStatuUp'){
        //         console.log(datas.data.state)
        //         if(datas.data.state == 1){
        //             label = new BMap.Label("打开");
	    //             marker2.setLabel(label);
        //         }else{
        //             label = new BMap.Label("关闭");
	    //             marker2.setLabel(label);
        //         }
        //     } else if(datas.cmd == 'sendGarbagebinStatuInfo'){
        //         if(datas.data.full == 1){
        //             label = new BMap.Label("溢满");
	    //             marker2.setLabel(label);
        //         }else{
        //             label = new BMap.Label("未溢满");
	    //             marker2.setLabel(label);
        //         }
        //     } 
            // if(datas.cmd){
            //     var label = new BMap.Label("溢满");
	        // marker2.setLabel(label);
            // }
            
            addInfoWindow(marker2);
            map.addOverlay(marker2); 
            }
            
           

          
        
    // (E0D55E0FE561)\2020-08-17 09_18_29\system-master\system-master\src\assets\img
    //增加信息窗口
    function addInfoWindow(marker){        
        var sContent = "<h4 style='margin:0 0 2px 0;padding:0.2em 0'>体院北育贤里7号楼1门</h4>"
        + "<div><img style='float: left;width:90px;height=100%;' src='https://taojin-his.cdn.bcebos.com/03087bf40ad162d9ac75ef6d1edfa9ec8a13cd2c.jpg' alt='logo'>"
        + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>厨余垃圾桶：5.2kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>可回收圾桶：3.4kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>其他垃圾桶：已满溢</p>"
        + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>有害垃圾桶：1.1kg</p>"
        + "<br>"
        + "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>指导员：张旭</p>"
	    + "</div>";
	// var map = new BMap.Map("allmap");
	// var point = new BMap.Point(116.404, 39.915);
	// var marker = new BMap.Marker(point);
	var infoWindow = new BMap.InfoWindow(sContent, {width:320,height:160});  // 创建信息窗口对象
	// map.centerAndZoom(point, 15);
	// map.addOverlay(marker);
	marker.addEventListener("click", function(){          
	   this.openInfoWindow(infoWindow);
	   //图片加载完毕重绘infowindow
	   document.getElementById('imgDemo').onload = function (){
		   infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
	   }
	});
    }
    function setMapCenter(paraLat, paraLog){
        map.centerAndZoom(new BMap.Point(paraLat,paraLog), 18);
    }
    //增加圆
    function addCircle(paraLat, paraLog){
        map.removeOverlay(scopeCircle);
        console.log("增加圆");
        var point = new BMap.Point(paraLat, paraLog);// 创建点
        scopeCircle = new BMap.Circle(point,200, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.9});
	    map.addOverlay(scopeCircle);            
    }

    //增加多边形
    function addPolygon(){
        var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
	map.addOverlay(polygon);   
    }

    function initMap(){
        // 百度地图API功能
        map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(117.194579,39.084342),10);  // 初始化地图,设置中心点坐标和地图级别
        map.setCurrentCity(theCity);          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        
        //设置地图样式
        map.setMapStyle({
            styleJson: [
                {
                    "featureType": "poilabel",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }
            ]
        });

        //添加地图类型控件
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP
                ,BMAP_SATELLITE_MAP  
                // ,BMAP_HYBRID_MAP
            ],
			anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));	  
    }    
</script>